<!DOCTYPE html>
<html xmlns="http://www.thymeleaf.org">
<head>
<title>Insert title here</title>
<meta charset="UTF-8">
<base th:href="@{/}"/>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/Managerstyle.css}"/>
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
	<div class="contain">
		<h3>班级管理</h3>

		<table class="table table-hover">
			<tr>
				<td>班级编号</td>
				<td>所属学院</td>
				<td>年级</td>
				<td>所属专业</td>
				<td>班级名称</td>
				<td>班级人数</td>
				<td>操作</td>
			</tr>
			<tr th:each="batch:${batchlist}" th:id="|tr${batch.bid}|">
				<td th:text="${batch.bid}"></td>
				<td th:text="${batch.major.acadamy.acdmname}"></td>
				<td th:text="${batch.major.term.tyear}"></td>
				<td th:text="${batch.major.mjname}"></td>
				<td th:text="${batch.bname}"></td>
				<td th:text="${batch.bcapacity}"></td>
				<td>
					<a th:href="|mc/to_modifyBatch/${batch.bid}|">修改</a>
					<a th:href="|javascript:deletebatch(${batch.bid});|">删除</a>
				</td>
			</tr>
		</table>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-success" data-toggle="modal" data-target="#addBatch">
		  添加新班级
		</button>
		<div class="text-center">
			<nav>
				<ul class="pagination">
					<li><a th:href="@{/mc/getAllBatch/(pageNo=1)}">首页</a></li>
					<li><a th:href="@{/mc/getAllBatch/(pageNo=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a></li>
					<li th:each="page:${pageInfo.navigatepageNums}">
						<a th:class="${pageInfo.pageNum}==${page}?'active'"
						   th:href="@{/mc/getAllBatch/(pageNo=${page})}">[[${page}]]</a>
					</li>
					<li><a th:href="@{/mc/getAllBatch/(pageNo=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></li>
					<li><a th:href="@{/mc/getAllBatch/(pageNo=${pageInfo.pages})}">尾页</a></li>
				</ul>
			</nav>
		</div>
		<!-- addBatch -->
		<div class="modal fade" id="addBatch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">添加新班级</h4>
		      </div>
		      <form action="mc/addBatch" method="post">
		      <div class="modal-body">
					<dl class="dl-horizontal">
					  <dt><label for="bname">班级名称：</label></dt>
					  <dd><input type="text" required="required" id="bname" name="bname" placeholder="在此输入班级名称" class="form-control" style="width: 170px;"></dd>
					  <br>
					  <dt><label for="bcapacity">班级容量：</label></dt>
					  <dd><input type="number" min="1" max="100" required="required" id="bcapacity" name="bcapacity" class="form-control" style="width: 70px;"></dd>
					  <br>
					  <dt>所属学院：</dt>
					  <dd>
					 	 <select id="select1">
							<option>请选择学院</option>
							<option th:each="acadamy:${acadamylist}" th:value="${acadamy.acdmid}"  th:text="${acadamy.acdmname}"></option>
						 </select>
					  </dd>
					  <br>
					  <dt>所属专业：</dt>
					  <dd>
					 	 <select id="select2" name="mjid">
							<option>请选择专业</option>
						</select>
					  </dd>
					</dl>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <input type="submit" class="btn btn-primary" value="添 加">
		      </div>
		      </form>
		    </div>
		  </div>
		</div>
	</div>
		
		<br>
		<br>
		
	<script type="text/javascript">  
            function deletebatch(id) {
                $.ajax({
                    url: 'mc/deleteBatch',
                    type: 'POST',
                    data: {bid: id}, 
                    success: function () {
                    	$("#tr" + id).remove(); 
                    },
                    error: function (req, status, error) {
                        alert("Ajax请求失败，错误：" + error);
                    }
                });
            }
            $(document).ready(function(){
				$("#select1").change(function(){
					var str2 = "<option>请选择专业</option>";
					$.ajax({
						url: 'mc/getMajorByacdmid',
						type: 'GET',
						data: {acdmid: $("#select1").val()},
						success: function(data){
							var str1 = "";
							$("#select2").empty();
						 	$("#select2").append(str2); 
							$.each(data,function(index,value){
								str1 = "<option value='"+ value.mjid +"'>" +  value.term.tyear + value.mjname + "</option>";
								$("#select2").append(str1);
							});
						},
						error: function(req,status,error){
							$("#select2").empty();
							$("#select2").append(str2);
						}
					}); 
				});
			});
    </script>
</body>
</html>